<template>
    <div id="tionshopp">
      <!-- <haders title="关注的店铺"></haders> -->
		<scroller ref="scroller" :on-infinite="infinite" >
			<div class="mian">
				<ul class="footpront">
					<li v-for="item in items" :key="item.id" @click="skip(item)" >
						<i><img :src="item.Logo" alt="加载失败" :onerror="imgError"/></i>
						<div>
							<p>{{item.ShopName}}</p>
							<p class="aline2">店铺地址：{{item.FullAddress}}</p> 
						</div>
					</li>  
				</ul>
				<!--没有数据时-->
				<!--<no-data v-if="items==0" title="还没有您的足迹~~~"></no-data>-->
				
			</div>
		</scroller>
    </div>    
</template>
<script> 
	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
export default {
  name: 'tionshopp',
  components:{ 
  },
  data () {
    return {
      indexPage:1,//请求页面索引
      items:[],
      done:''
    }
  },
  created() {
			this.imgError = this.$store.state.imgError; 
		},
  mounted(){ 
  },
  methods:{
		 infinite(done) {
				let _this = this;
				_this.done=done; 
				Indicator.open({text: '加载中...'});
				_this.$http.get("/GroupBuy/GetMyCollection", {
					params: {
						"page": this.indexPage,
						"type":1
					}
				}).then((res) => {
					console.log(res);
					if(res.data.data.List == "") {
						done(true);
					} else {
						if(_this.indexPage <= res.data.data.TotalPage) {
							_this.indexPage++;
							_this.items = _this.items.concat(res.data.data.List);
							console.log(_this.items);
							setTimeout(function() {
								done()
							}, 3000)
						} else {
							done(true)
						}
					}
					Indicator.close();
				}).catch((err) => {
					console.log(err)
				});
			},
			skip(item){
				this.$router.push({
					path: '/clientele/home/' + item.ShopId
				});
			}
  }
}
</script>
<style scoped>
.footpront{
		width: 100%;
	}
	.footpront li{
		width: 100%;
		padding: 0.3rem;
		border-bottom: 1px solid  #CCCCCC;
		background-color: #fff;
		overflow: hidden;
	}
	.footpront li:last-child{
		border-bottom: none;
	}
	.footpront li i{
		display:inline-block;
		float:left;
		width: 45%;
		height: 3rem;
		margin-right:0.3rem;
	}
	.footpront li i img{
		width: 100%;
		height: 100%;
	}
	.footpront li div{
		display: flex;
		flex-direction: column;
		height:3rem; 
		font-size: 0.373333rem;
		color: #333333;
	}
	.footpront li div p{
		margin-top: 0.3rem;
	}
	.footpront li div p:nth-child(1){
		font-size: 0.4rem;
	}
	.footpront li div p:nth-child(2){
		color: #666666;
	}
	 

</style>
